import React, {useEffect, useState} from 'react';
import {
    BarChartOutlined,
    BellOutlined,
    CloudOutlined,
    DesktopOutlined,
    GiftOutlined, HomeOutlined, OpenAIOutlined,
    ShoppingCartOutlined,
    TeamOutlined,
} from '@ant-design/icons';
import logo from '@/assets/cat.png'
import back from '@/assets/back.png'
import {Avatar, Badge, Button, MenuProps, Popconfirm, Popover} from 'antd';
import {Layout, Menu, theme} from 'antd';
import {Outlet, To, useLocation, useNavigate} from "react-router";
import useWeather from '@/hooks/get_weather.ts'

const {Header, Content, Sider} = Layout;

type MenuItem = Required<MenuProps>['items'][number];

function getItem(
    label: React.ReactNode,
    key: React.Key,
    icon?: React.ReactNode,
    children?: MenuItem[],
): MenuItem {
    return {
        key,
        icon,
        children,
        label,
    } as MenuItem;
}

const items: MenuItem[] = [
    getItem('首页', '/', <HomeOutlined/>), getItem('商品管理', 'sub0',
        <GiftOutlined/>, [getItem('商品数据', '/product/management'), getItem('热销商品', '/product/hot')]), getItem('用户管理', 'sub1',
        <TeamOutlined/>, [getItem('用户数据', '/user/data')]), getItem('订单管理', 'sub2',
        <ShoppingCartOutlined/>, [getItem('订单数据', '/order/management'), getItem('库存管理', '/stock/management'), getItem('优惠券管理', '/shopping/coupon')]), getItem('数据统计', 'sub5',
        <BarChartOutlined/>, [getItem('性别数据统计', '/data/gender'), getItem('地域数据统计', '/data/address'), getItem('热销商品统计', '/data/hot')]), getItem('权限管理', 'sub3',
        <OpenAIOutlined/>, [getItem('管理员数据', '/admin/information'), getItem('权限管理', '/admin/management')]), getItem('系统管理', 'sub4',
        <DesktopOutlined/>, [getItem('关于我们', '/system/about'), getItem('设置', '/system/set'), getItem('个人中心', '/system/me'), getItem('开发日志', '/system/log')])
];


const Home: React.FC = () => {
    const {
        token: {colorBgContainer, borderRadiusLG},
    } = theme.useToken();

    // 获取天气信息
    const {WeatherList} = useWeather()
    // 天气组件
    const content = (
        <div style={{width: 280, height: 140, position: "relative"}}>
            <img
                src={back}
                style={{width: '100%', height: '100%', borderRadius: 10, opacity: 0.8}} alt=""/>

            <div style={{
                width: 280,
                position: 'absolute',
                top: 10,
                right: 0,
                fontSize: 15,
                fontWeight: 'bold',
                color: '#fff',
                display: 'flex',
                justifyContent: 'space-evenly',
            }}>
                <div>
                    <p>地区：{WeatherList.address}</p>
                    <p>天气：{WeatherList.weather}</p>
                    <p>温度：{WeatherList.temp}</p>
                </div>
                <div>
                    <p>风级：{WeatherList.windPower}</p>
                    <p>湿度：{WeatherList.humidity}</p>
                </div>
            </div>
        </div>
    )
    // 获取当前页面路由
    type PathName = string
    const {pathname} = useLocation();
    const [current, setCurrent] = useState<PathName>(pathname);

    useEffect(() => {
        setCurrent(pathname)
    }, [pathname])

    // 点击侧边栏
    const navigate = useNavigate();
    const onMenuClick = (e: { key: To | undefined; }) => {
        if (e.key !== undefined) {
            navigate(e.key);
        }
    };

    // 退出系统
    const logout = () => {
        navigate('/login')
    }


    return (<Layout
            style={{
                minHeight: '100vh',
            }}
        >
            <Sider
                style={{overflow: 'auto', height: '100vh'}}
            >
                <div className="demo-logo-vertical"
                     style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
                    <div style={{
                        flex: '0.8',
                        textAlign: 'center',
                        height: '90px',
                    }}>
                        < Avatar
                            style={{width: '80px', height: '80px'}}
                            src={logo}/>
                    </div>
                </div>

                <div>
                    <Menu theme="dark"
                          defaultSelectedKeys={[current]}
                          onClick={onMenuClick}
                          mode="inline"
                          items={items}/>
                </div>
            </Sider>
            <Layout className="site_layout">
                <Header
                    style={{
                        padding: 0,
                        width: '100%',
                        display: 'flex',
                        justifyContent: 'space-between',
                        background: colorBgContainer,
                        borderRadius: borderRadiusLG,
                        alignItems: 'center'
                    }}>
                    <div style={{
                        marginLeft: '20px'
                    }}>
                        <Popover placement="bottom" title={"今日天气"} content={content}>
                            <Button type={"default"} icon={<CloudOutlined/>}>天气</Button>
                        </Popover>
                    </div>
                    <div style={{
                        width: '500px',
                        marginRight: '8px',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'space-evenly'
                    }}>
                        <div style={{marginRight: '20px'}}>
                            <Popover placement="bottom" title={"系统管理员"}>
                                < Avatar size={50}></Avatar>
                            </Popover>

                            <i style={{marginLeft: '10px'}}>Hello，欢迎来到喵喵商城管理系统</i>
                        </div>
                        <div>
                            <Popover placement="bottom"
                                     title={<div style={{
                                         display: 'flex',
                                         justifyContent: 'space-between',
                                         alignItems: 'center',
                                         fontSize: '12px'
                                     }}>
                                         < p> 消息列表 </p>
                                         <a href={'/system/message'} style={{fontWeight: 200}}>查看更多</a>
                                     </div>}>
                                <Badge>
                                    <Button type={"default"} icon={<BellOutlined/>}></Button>
                                </Badge>
                            </Popover>
                        </div>
                        <Popconfirm
                            title="安全退出"
                            description="你确定要退出系统吗？"
                            okText="确定"
                            onConfirm={logout}
                            cancelText="取消"
                        >
                            <Button type={"primary"}>安全退出</Button>
                        </Popconfirm>
                    </div>
                </Header>
                <Content>
                    {/*二级路由的出口*/}
                    <div style={{
                        width: '100%',
                        height: '100%',
                        boxSizing: 'border-box',
                        overflow: 'hidden',
                        padding: '5px',
                        background: '#f0f2f5',
                    }}>
                        <Outlet/>
                    </div>
                </Content>
            </Layout>
        </Layout>
    )
}

export default Home